<template>
  <div>
    <!-- 头部 -->
    <van-row class="heads">
      <van-col span="8">
        <van-icon name="arrow-left" @click="back" class="back" />
        <span> 浏览历史 </span>
      </van-col>
      <!-- <van-col span="4" offset="12"> 编辑 </van-col> -->
    </van-row>
    <!-- 浏览渲染 -->
    <!-- <van-row v-for="(item, i) in history" :key="i" v-html="item">
      {{ item }}
    </van-row> -->
    <van-row>
      <van-swipe-cell v-for="(item,index) in history" :key="index" >
        <van-card
          :price=item.price
          :desc=item.des
          :title=item.title
          :thumb=item.thumb
        >
          <template #tags>
            <van-rate
              allow-half
              readonly
              v-model=item.value
              size="20"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
          </template>
          <template #footer>
            <van-button size="mini">找相似</van-button>
          </template>
        </van-card>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
    </van-row>
  </div>
</template>

<script>
export default {
  name: "Fruith5History",

  data() {
    return {
      
      history: [
        {
          id: 1,
          price:5.00,
          des:'销量999',
          title:'黑美人西瓜',
          thumb:require('../../../assets/img/profile/雨娃娃.png'),
          value: 5,
        },
        {
          id: 2,
          price:8.00,
          des:'销量998',
          title:'花生',
          thumb:require('../../../assets/img/profile/雨娃娃.png'),
          value: 3.5,
        },
      ],
    };
  },

  mounted() {},

  methods: {
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style  scoped>
.back {
  cursor: pointer;
}
.heads {
  font-size: 18px;
  font-weight: bold;
  /* line-height: 2.375rem; */
  color: white;
  background-color: rgb(0, 255, 170);
  height: 2.375rem;
  padding: 0.9375rem 0.1875rem 0rem 0.625rem;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
</style>